<template>
    <div>
        <el-divider/>
        <span>患者信息：</span>
        <el-tag class="ml-2">姓名：{{ patientInfo.realName }}</el-tag>
        <el-tag class="ml-2">病历号：{{ patientInfo.caseNumber }}</el-tag>
        <el-tag class="ml-2">年龄：{{ patientInfo.age }}</el-tag>
        <el-tag class="ml-2">性别：{{ patientInfo.gender }}</el-tag>
        <el-button type="danger" size="small" @click="clearPatientInfo">清空选择</el-button>
        <el-divider/>
        <el-icon>
            <DocumentChecked/>
        </el-icon>
        <span>检查申请</span>
        <el-divider/>
        <!--
        查询病人
        -->
        <el-table :data="patientInfoList" stripe table-layout="auto" height="250">
            <el-table-column label="患者病历号">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.caseNumber }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="患者姓名">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.realName }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="性别">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="年龄">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.age }}</span>
                        <span style="margin-left: 10px">{{ scope.row.ageType }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="病历本">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.isBook }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="selectPatient(scope.row)">选择患者</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider/>
        <el-tag>
            <el-icon>
                <Goods/>
            </el-icon>
            项目金额：{{ totalPrice }}元
        </el-tag>
        <!--
        已选择的列表
        -->
        <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%"
                @select="addTempList"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column property="techCode" label="检查编码" width="240"/>
            <el-table-column property="techName" label="检查名称" width="360"/>
            <el-table-column property="techFormat" label="检查规格" show-overflow-tooltip/>
            <el-table-column property="techPrice" label="单价" show-overflow-tooltip/>
            <el-table-column property="priceType" label="费用分类" show-overflow-tooltip/>
            <el-table-column align="right">
                <template #header>
                    <el-link type="primary" @click="removeTech">删除</el-link>
                    <el-link type="primary" @click="dialogTableVisible = true;queryTecByPage()">增加
                    </el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-divider/>
        医嘱
        <el-form>
            <table class="base-info">
                <tr>
                    <td>目的要求：</td>
                    <td>
                        <el-input type="textarea" v-model="checkRequestInfo.checkInfo"/>
                    </td>
                </tr>
                <tr>
                    <td>检验部位：</td>
                    <td>
                        <el-input type="textarea" v-model="checkRequestInfo.checkPosition"/>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <el-input type="textarea" v-model="checkRequestInfo.checkRemark"/>
                    </td>
                </tr>
            </table>
        </el-form>
        <el-divider/>
        <el-button type="primary" @click="saveRecord">提交申请</el-button>
        <el-button @click="clearInfo">清空</el-button>
        <el-dialog v-model="dialogTableVisible" title="疾病搜索" width="80%">
            <!--        疾病搜索框-->
            <div class="dialogBox">
                <div>
                    <el-input
                            v-model="searchInfo"
                            placeholder="Please input"
                            class="input-with-select">
                        <!-- 搜索选择-->
                        <template #prepend>
                            <el-select v-model="searchSelect" placeholder="请选择搜索内容" style="width: 115px">
                                <el-option label="项目编码" value="techCode"/>
                                <el-option label="项目名称" value="techName"/>
                            </el-select>
                        </template>
                    </el-input>
                </div>
                <div>
                    <el-divider/>
                    <el-table
                            ref="multipleTableRef"
                            :data="filterTableData"
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                            height="350"
                            @select="getSelectRows"
                    >
                        <el-table-column type="selection" width="55"/>
                        <el-table-column property="techCode" label="检查编码" width="240"/>
                        <el-table-column property="techName" label="检查名称" width="360"/>
                        <el-table-column property="techFormat" label="检查规格" show-overflow-tooltip/>
                        <el-table-column property="techPrice" label="单价" show-overflow-tooltip/>
                        <el-table-column property="priceType" label="费用分类" show-overflow-tooltip/>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script setup>
import {ref, reactive, provide} from "vue";
import {DocumentChecked, Goods} from '@element-plus/icons-vue'
import axios from "axios";
import {computed} from "vue";
import {ElNotification} from "element-plus";

axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)
const dialogTableVisible = ref(false)
const filterTableData = computed(() =>
    medicalTechList.value.filter(
        (data) =>
            !searchInfo.value ||
            data[searchSelect.value].toLowerCase().includes(searchInfo.value.toLowerCase())
    )
)
//医技项目数量
const techNum = ref(0)
//医技项目列表
const medicalTechList = ref([])
//选择的患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    gender: ''
})
//疾病搜索框中的内容
const searchInfo = ref('')
//疾病搜索中选择的内容
const searchSelect = ref('')
//已经选择的医技项目
const tableData = ref([])
//选择医技项目临时列表
const selectTemp = ref([])
//当前登录医生的信息
const loginEmp = ref({
    id: '1',
    realname: '扁鹊',
})
//当前医生中正在看诊的患者列表
const patientInfoList = ref([])
//项目总金额显示
const totalPrice = ref(0)
totalPrice.value = computed(() => {
    let tempCount = 0
    tableData.value.forEach(medicalTech => {
        tempCount += medicalTech.techPrice
    })
    return tempCount
})
//检查申请表
const checkRequestInfo = ref({
    registerId: '',
    medicalTechnologyId: '',
    checkPosition: '',
    checkInfo: '',
    checkRemark: ''
})
//查询当前医生的状态为就诊中的患者列表
axios({
    method: 'get',
    url: 'register/queryRegisterByStateAndDoc/' + 2 + '/' + loginEmp.value.id
}).then(resp => {
    patientInfoList.value = resp.data.data
})

//选择一个患者
function selectPatient(val) {
    patientInfo.value = val
    //设置申请表中患者的id
    checkRequestInfo.value.registerId = patientInfo.value.id
}

function queryTecByPage() {
    //发送请求查询总数量
    axios({
        method: 'get',
        url: 'medicalTechnology/queryTecNum/检查'
    }).then(resp => {
        techNum.value = resp.data.data
    })
    axios({
        method: 'get',
        url: 'medicalTechnology/queryTechByType/检查'
    }).then(resp => {
        medicalTechList.value = resp.data.data
    })
}

function getSelectRows(selection, row) {
    if (tableData.value.length >= 1) {
        alert("只能提交一个检查申请")
        return;
    }
    let ifHava = tableData.value.some((disInfo => {
        return disInfo.id == row.id
    }));
    if (!ifHava) {
        tableData.value.push(row)
    } else {
        return
    }
}

function removeTech() {
    for (let i = 0; i < selectTemp.value.length; i++) {
        let ifHava = tableData.value.some((techInfo => {
            return tableData.value == selectTemp.value[i]
        }));
        if (!ifHava) {
            for (let j = 0; j < tableData.value.length; j++) {
                if (tableData.value[j].id == selectTemp.value[i].id) {
                    tableData.value.splice(j, 1)
                }
            }
        } else {
            return
        }
    }
}

function addTempList(selection) {
    selectTemp.value = selection
}

//重置选择的患者信息
function clearPatientInfo() {
    patientInfo.value = {
        caseNumber: '',
        realName: '',
        age: '',
        gender: ''
    }
    checkRequestInfo.value.registerId = ''
}

//点击提交申请
function saveRecord() {
    if (checkRequestInfo.value.registerId == null || checkRequestInfo.value.registerId == '') {
        alert("请先选择患者")
        return;
    }
    if (tableData.value.length == 0) {
        alert("请先选择检查项目")
        return;
    }
    //添加医技项目信息到申请表中
    checkRequestInfo.value.medicalTechnologyId = tableData.value[0].id
    axios({
        method: 'post',
        url: 'checkRequest/addCheck',
        data: checkRequestInfo.value
    }).then(resp => {
        if(resp.data.success){
            // ElNotification({
            //     title: 'Success',
            //     message: '申请添加成功',
            //     type: 'success',
            //     position:'top-right',
            //     zIndex:10
            // })
            window.alert("添加成功")
        }
    })
}

//清空页面
function clearInfo() {
    checkRequestInfo.value = {
        registerId: '',
        medicalTechnologyId: '',
        checkPosition: '',
        checkInfo: '',
        checkRemark: ''
    }
    tableData.value = []
    patientInfo.value = {
        caseNumber: '',
        realName: '',
        age: '',
        gender: ''
    }
}
</script>

<style scoped>
.el-link {
    margin-right: 10px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.el-button--text {
    margin-right: 15px;
}


.dialog-footer button:first-child {
    margin-right: 10px;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.base-info {
    width: 100%;
}

.base-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.base-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.base-info, .base-info th, .base-info td {
    font-size: 0.95em;
    text-align: center;
    padding: 1.1vw;
    border-collapse: collapse;
}

.base-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info tr {
    border: 1px solid #ffffff;
}

.base-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.base-info tr:nth-child(even) {
    background-color: #ffffff;
}

.base-info tr td:nth-child(1) {
    width: 5vw;
}
</style>